<!--组件-策略方向-->
<template>
  <div>

    <text class="font28 text2">{{T('策略方向')}}</text>

    <div class="select">
      <div :class="['select-but', !target ? 'main1' : 'bg2']" @click="targetClick(false)">
        <text :class="['font28' , !target ? 'text1' : 'text2']">{{T('赚')+baseCoin}}</text>
        <text :class="['font20' , !target ? 'text1' : 'text2']">{{'('+T('看多行情')+')'}}</text>
      </div>
      <div :class="['select-but', target ? 'main1' : 'bg2']" @click="targetClick(true)"> 
        <text :class="['font28' , target ? 'text1' : 'text2']">{{T('赚')+counterCoin}}</text>
        <text :class="['font20' , target ? 'text1' : 'text2']">{{'('+T('看空行情')+')'}}</text>
      </div>
    </div>

  </div>
</template>

<script>

import math from "@/_js/math";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  props:{

    target:{
      type:Boolean,
      default:false, //true 赚交易币， false 赚本币
    },
    counterCoin: String, //交易币
    baseCoin: String, //本币
  },
  
  data() {
    return {
      T:T,
      math:math,
    };
  },

  mounted(){
  },

  methods:{

    /********************************** 点击触发*/
    //策略方向
    targetClick(target){
      if (this.target == target) {
        return;
      }
      this.$emit("click", target);
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.select {
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

.select-but {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  height: 76px;
  width: 300px;
  border-radius: 16px;

  padding-left: 20px;
  padding-right: 20px;
}

</style>
